<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="头像" align="center" prop="avatar" width="100px">
        <template #default="scope">
          <el-avatar
            fit="cover"
            :src="scope.row.avatar"
            class="flex-none w-50px h-50px"
            @click="imagePreview(scope.row.avatar)"
          />
          <el-text :content="scope.row.nickname" />
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center" prop="nickname" width="100px">
        <template #default="scope">
          <el-text :content="scope.row.nickname" />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { SimpleUserVO } from '@/api/member/user'
import { VLogCommentApi } from '@/api/vlog/comment'
import { createImageViewer } from '@/components/ImageViewer'

/** 视频评论点赞用户列表 */
defineOptions({ name: 'CommentLikedList' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const loading = ref(true) // 列表的加载中
const list = ref<SimpleUserVO[]>([]) // 列表的数据

/** 打开弹窗 */
const open = async (id: number | string) => {
  if (!id) {
    message.success('缺少视频评论编号')
    return
  }
  dialogVisible.value = true
  dialogTitle.value = '点赞用户列表'
  loading.value = true
  try {
    list.value = await VLogCommentApi.getVLogCommentLikedUserList(id)
  } finally {
    loading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 大图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
</script>
